結構與樣式在執行的概念上就是這樣的白話，目標即是將這兩者分離，上一篇我們用建築物的結構與外觀樣式做分離，再依不同的需求去做組合。

CSS 上也是相同的道理，比如說我們可以做這樣的分類：

• 結構：margin、padding、display、vertical-align
• 樣式：
  • 色彩樣式：color、background-color、border-color
  • 尺寸樣式：font-size、height

案例說明

我們透過一個簡單的小故事作為範例，讓大家了解 OOCSS 在實作上是如何運作。

Step1

我們接到一個工作要設計一組按鈕的 CSS，由於這組按鈕是作為銷售頁面的用途，在設計上我們有以下規劃：

• 按鈕有三個，依據顯眼程度的順序是 購買、註冊、說明。
• 網站的主色是藍色，強調色彩是紅色 (這邊不特別定義色碼)。

範例：http://codepen.io/Wcc723/pen/KzXZaz/

就以需求來說，我們可以依據需求做出三個按鈕，名稱分別命名為 .button-resgister、.button-purchase、.button-info，顏色也分別為 藍色、紅色、白色。

就以這個範例來說，我刻意很明確地將相同的部分寫在上方，其實這也就是結構與樣式混合的範例。

.button-resgister {
  /* 重複的部分 */
  display: inline-block;
  padding: .375rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: .25rem;

  /* 樣式 */
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}

結構與樣式的混合的結果，就是有大量重複的程式碼，這個案例中我們可以先將重複的程式碼抓出來，來達到結構與樣式分離。

範例：http://codepen.io/Wcc723/pen/dOdWGQ/

Step2

由於需要更多的按鈕樣式，目前提供的三個按鈕並不足夠，在規劃上需要做以下調整：

• 按鈕有三個，依據顯眼程度的順序是 購買(主色)、註冊(強調色)、說明。
• 網站的主色是藍色，強調色彩是紅色 (這邊不特別定義色碼)。
• 說明按鈕還要做登入的功能，註冊按鈕還要兼著做訂閱電子報。

所以命名的部分，建議不要直接使用按鈕的功能性直接命名，而是可以按鈕的樣式特性來命名，比如說：

• 結構：btn
• 色彩
  • 主次要：primary, accent

依據這樣的調整，樣式的設計就不會被原本的功能限制，使用更為靈活。

範例：http://codepen.io/Wcc723/pen/YpeVNg/

.btn {
  display: inline-block;
  padding: .375rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: .25rem;
}
.btn-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}

.btn-accent {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-secondary {
  color: #373a3c;
  background-color: #fff;
  border-color: #ccc;
}

最後，按鈕的結構就會有很大的調整，結構與樣式分離後，面對更多的挑戰(? 時可以減少修改的幅度，如果要再調整按鈕大小，相信大家也能夠用相同的概念去調整。

文章同時發表於：https://wcc723.github.io/css/2016/12/03/oocss-two/